var AlbumCover = new Class({
	options: {
		reflection: true
	},

	initialize: function (el, options) {
		if (el.getTag() != 'canvas') {
			throw "parent must be a frame";	
		}

		this.setOptions(options);
		
		this.$reflectionImg = new Element('image', {
			src: 'Resources/reflections.png'
		});
		cdCase = new Element('image', {
			src: 'Resources/cd_case.png'
		});
		stitch = new Element('image', {
			src: "Resources/stitch.png"
		});
		
		this.$tmpAlbumCanvas = new Element('canvas', {
			width: cdCase.srcWidth,
			height: cdCase.srcHeight
		});
		
		var ctx = this.$tmpAlbumCanvas.getContext("2d");
		ctx.drawImage(cdCase, 0, 0);
		ctx.drawImage(stitch, 19, 3);
		ctx.drawImage(this.$reflectionImg, 0, 0);
		
		this.$canvas = el;
		this.$img = new Element('image');
		this.resize(el.width, el.height);
	},
	
	resize: function (width, height) {
		this.$canvas.width = width;
		this.$canvas.height = height * (this.options.reflection ? 1.5 : 1);
		if (this.$img.src) {
			this.$drawAlbumArt();
		}
	},
	
	clear: function () {
		this.$canvas.getContext("2d").clearRect(0, 0, this.$canvas.width, this.$canvas.height);
	},
	
	$drawAlbumArt: function() {
		var ctx = this.$tmpAlbumCanvas.getContext("2d");
		ctx.drawImage(this.$img, 19, 3, 240, 227);
		ctx.drawImage(this.$reflectionImg, 19, 3, 240, 227, 19, 3, 240, 227);
		
		ctx = this.$canvas.getContext("2d");
		var width = this.$canvas.width;
		var height = this.$canvas.height * (this.options.reflection ? 2 / 3: 1); 	
		
		ctx.drawImage(this.$tmpAlbumCanvas, 0, 0, width, height);
		if (this.options.reflection) {
			ctx.save();
			ctx.translate(0, height);
				ctx.save();
				ctx.translate(0, height);
				ctx.scale(1, -1);
					ctx.save();
					ctx.beginPath();
					ctx.rect(0, height / 2 + 1, width, height / 2);
					ctx.closePath();
					ctx.clip();
					ctx.drawImage(this.$tmpAlbumCanvas, 0, 0, width, height);
					ctx.restore();
				ctx.restore();
			ctx.globalCompositeOperation = "destination-out";
			var grad = ctx.createLinearGradient( 0, 0, 0, height / 2);
			grad.addColorStop( 0, "rgba( 0, 0, 0, 0.6 )" ); 
			grad.addColorStop( 1.0, "rgba( 0, 0, 0, 1.0 )" );
			ctx.fillStyle = grad; 
			ctx.fillRect( 0, 0, width, height / 2); 
			ctx.restore();
		}
	},
	
	set src (albumSrc) {
		this.$canvas.getContext("2d").clearRect(0, 0, this.$canvas.width, this.$canvas.height);
		this.$img.src = albumSrc;
		this.$drawAlbumArt();
	},
	
	get src () {
		return this.$img.src;
	},
	
	get element () {
		return this.$canvas;
	},
	
	get opacity () {
		return this.element.opacity;
	},
	
	set opacity (val) {
		this.element.opacity = val;
	},
});
AlbumCover.implement(new Options);

var AlbumArt = new Class({
	options: {
		reflection: true
	},
	
	initialize: function (el, options) {
		if (el.getTag() != 'frame') {
			throw "parent must be a frame";	
		}
		this.$element = el;

		this.setOptions(options);
		
		this.$canvas = new AlbumCover($E('canvas', el), {reflection: this.options.reflection});
		
		// setup rest of the elements
		this.$infoFrame = $E('frame[albumInfoFrame]', el);
		if (!this.$infoFrame)
			throw "need to have an info frame";

		this.$artistInfo = $E('text[artist]', this.$infoFrame);
		if (!this.$artistInfo)
			throw "need to have artist text";
		
		this.$titleInfo = $E('text[title]', this.$infoFrame);
		if (!this.$titleInfo)
			throw "need to have title";
		
		var infos = this.$infoFrame.getChildren();
		
		infos.each(function (item, index){
			if (item.getTag() == 'text') {
				item.anchorStyle = "topLeft";
			}
			
			if (index == 0) {
				item.vOffset = 0;
			} else {
				item.vOffset = infos[index - 1].getBounds().getMaxY() + 1;
			}
		}.bind(this));
		
		this.resize(el.width, el.height);
		this.$info = null;
	},
	
	resize: function (width, height) {
		this.$element.set({
			width: width,
			height: height
		});
		
		var imageWidth = this.$element.width * 0.4 * 1.125;
		var imageHeight = imageWidth;
		this.$canvas.resize(imageWidth, imageHeight);
		this.$infoFrame.width = imageWidth * 1.5;
		this.$artistInfo.width = this.$infoFrame.width;
		this.$titleInfo.width = this.$infoFrame.width;

		this.$canvas.element.set({
			hOffset: (width - this.$canvas.element.width) / 2,
			vOffset: (height - imageWidth - 30 - this.$infoFrame.height) / 2
		});
		
		this.$infoFrame.set({
			hOffset: (width - this.$infoFrame.width) / 2,
			vOffset: this.$canvas.element.vOffset + imageWidth + 30
		});
		
		this.songInfo = this.$info;
	},
	
	set songInfo (info) {
		this.$info = info;
		
		if (!info) {
			// clear
			this.$canvas.clear();
			this.$artistInfo.text = "";
			this.$titleInfo.text = "";
		} else {
			this.$artistInfo.text = info.artist.name;
			this.$titleInfo.text = info.album.title;
			
			if (info.album.cover_path === null) {
				info.album.cover_path = getAlbumArtImg(info.path);
				info.album.saveOrUpdate();
			}
			var albumSrc = info.album.cover_path;
			if (this.$canvas.src == albumSrc) {
				return;
			}
			this.$canvas.src = albumSrc;
		}
	}
});
AlbumArt.implement(new Options);
